<template>
  <view class="scl-box" @click="clickEmit" :style="{backgroundImage: isShowBg ? 'url('+bg+')' : ''}" v-show="sclData">
    <!-- :style="{backgroundImage:'url('+bg+')'}" -->
    <view class="new-icon-wrapper" v-if="sclData.isSclNew == 1">
      <image :src="newIcon" class="new-icon" mode=""></image>
    </view>

    <view class="img-box">
      <image :src="sclData.coverImg" class="tbi-img" mode="aspectFill"></image>
    </view>

    <view class="tbi-info">
      <view class="scl-box-top">
        <view class="tbii-title limit-text-single-line">{{sclData.sclName}}</view>
        <view class="tbii-content limit-text-two-line">
          {{ sclData.summary }}
        </view>
      </view>
      <view class="scl-box-bot">
        <view class="use-count-num-wrapper">
          <view class="tbiip-count">
            <image class="tbii-ic-count" :src="teamIcon" mode="">
            </image>{{viewNumStr}}次
          </view>
        </view>
        <view class="btn-box">
          去测试
        </view>
      </view>
      
    </view>
  </view>
</template>

<script>
  const defaultObj = {
    coverImg: '', // 测评封面
    sclName: '', // 测评名
    summary: '', // 简介
    newOriginalPrice: 0, //原价
    discountPrice: 0, //现价
    collectNums: 0, //测评人数
  }
  export default {
    props: {
      sclData: {
        type: Object,
        default: () => defaultObj
      },
      // discountNum:{
      //   type:Number,
      // },
      // discountType:{
      //   type:Number,
      //   default:0
      // },
      isShowBg: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        test_num: this.imgBaseURL + '/sclResult/test_num.png',
        newIcon: this.imgBaseURL + '/scl/scl_box_new_icon.png',
        bg: this.imgBaseURL + '/scl/scl-box-bg.png',
        teamIcon: this.imgBaseURL + '/scl/team-icon-33.png',
      }
    },
    computed: {
      viewNumStr() {
        //大于1万则显示1w，例子：1.2w
        if (this.sclData?.collectNums > 10000) {
          return `${(this.sclData?.collectNums / 10000).toFixed(1)}w`
        } else {
          return this.sclData?.collectNums
        }
      }
    },
    methods: {
      clickEmit() {
        this.$emit('clickBox')
      }
    },
  }
</script>

<style lang="scss">
  .new-icon-wrapper {
    position: absolute;
    // right: -4rpx;
    // top: 0;
    right: -8rpx;
    top: -2px;

    .new-icon {
      width: 90rpx;
      height: 90rpx;
    }
  }

  .tbii-price {
    position: absolute;
    left: 0rpx;
    right: 76rpx;
    bottom: 20rpx;
    width: 100%;

    .price-free {
      font-size: 28rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #F14C4C;
      line-height: 32rpx;
    }

  }

  .tbiip-text {
    font-size: 32rpx;
    color: #F14C4C;
  }

  .tbii-content {
    font-size: 26rpx;
    font-weight: 300;
    color: #888888;
    line-height: 34rpx;
    margin-top: 6rpx;
  }

  .tbii-title {
    font-size: 28rpx;
    color: #333435;

    font-family: PingFang-SC, PingFang-SC;
    font-weight: 400;
    font-size: 32rpx;
    color: #333333;
    text-align: left;
    font-style: normal;
    margin-top: 16rpx;
  }

  .tbi-img {
    width: 164rpx;
    height: 180rpx;
    box-sizing: border-box;
    border-radius: 12rpx;
    flex-shrink: 0;
  }

  .tbi-info {
    width: 100%;
    height: 205rpx;
    margin-left: 22rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    font-family: PingFangSC, PingFang SC;
    font-weight: 300;
    font-size: 26rpx;
    color: #888888;
    // line-height: 34rpx;
    text-align: justify;
    font-style: normal;

    .scl-box-bot {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 16rpx;

      .use-count-num-wrapper {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        color: rgba(153, 153, 153, 1);
        line-height: 45rpx;
        text-align: left;
        font-style: normal;

        // min-width: 110rpx;
        height: 44rpx;
        padding: 0px 3rpx;
      }

      .tbiip-count {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        color: rgba(153, 153, 153, 1);
        text-align: left;
        font-style: normal;

        display: flex;
        justify-content: center;
        margin-top: 8rpx;
        .tbii-ic-count {
          width: 26rpx;
          height: 26rpx;
          margin-top: 8rpx;
          margin-right: 8rpx;
        }
      }

      .btn-box {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 26rpx;
        color: #FFFFFF;
        line-height: 50rpx;
        text-align: center;
        font-style: normal;

        width: 130rpx;
        height: 50rpx;
        background: linear-gradient(180deg, #A9EE87 0%, #70D669 100%);
        border-radius: 25rpx;
      }

    }
  }

  .tb-list {
    width: 100%;
    height: 260rpx;
    // background: #FFFFFF;
    border-radius: 24rpx;
    margin: 0 auto;
    padding: 40rpx 30rpx;
    padding-top: 38rpx;

    box-sizing: border-box;
    display: flex;
    // margin-bottom: 12rpx;
    // box-shadow: 0px 2rpx 20rpx 0px #E7F5D9;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
  }

  .test-box {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 12rpx;

  }

  .scl-box {
    position: relative;
    display: flex;
    align-items: center;

    border-radius: 24rpx;

    padding: 0 18rpx;

    box-sizing: border-box;
    width: 720rpx;
    height: 210rpx;
    margin: auto;
    // margin-bottom: 12rpx;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #fff;

    box-shadow: 0rpx 2rpx 10rpx 0rpx #E2F3D0;
    
    .img-box{
      position:relative;
      display: flex;
      align-items: center;
    }

    .price-wrapper {
      display: flex;
      align-items: flex-end;

      .sid-price-discount {
        background: linear-gradient(270deg, #FF2F00 0%, #FC9C94 100%);
        box-shadow: 0rpx 2rpx 20rpx 0rpx #D4F1C4;

        border-image: linear-gradient(180deg, rgba(252, 244, 230, 1), rgba(255, 254, 235, 1)) 2 2;
        border-radius: 8rpx 0rpx 14rpx 0rpx;
        text-align: center;
        line-height: 40rpx;

        font-size: 24rpx;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        color: #FFFFFF;

        text-shadow: 0px 2px 20px #D4F1C4;

        height: 33rpx;
        width: 70rpx;
        line-height: 33rpx;

      }

      .yiyuan-discount-wrapper {
        position: relative;
        height: 48rpx;
        background-color: #D4F1C4;

        .yiyuan-discount {
          position: absolute;
          left: 0;
          top: 0;
          width: 130rpx;
          height: 48rpx;
          background: linear-gradient(270deg, #FF2F00 0%, #FF8E84 100%);
          border-radius: 25rpx;

          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
          line-height: 48rpx;
          text-align: center;
          font-style: normal;
          z-index: 2;
        }


        .base-price-box {
          position: absolute;
          left: 100rpx;
          top: 8rpx;
          z-index: 1;
          // width: 223rpx;
          height: 40rpx;
          background: #EFECEC;
          border-radius: 25rpx;
          // line-height: 40rpx;
          box-sizing: border-box;
          padding-right: 14rpx;
          padding-left: 44rpx;

          display: flex;
          align-items: center;
          justify-content: flex-end;


          .text-dc {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
            line-height: 33rpx;
            text-align: left;
            font-style: normal;
            word-break: keep-all;

          }

          .price-dc {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #666666;
            line-height: 24rpx;
            text-align: left;
            font-style: normal;
          }

          text-align: right;
        }

      }


      .discount-wrapper {
        position: relative;
        height: 48rpx;

        .discount-text {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 2;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
          line-height: 33rpx;
          text-align: left;
          font-style: normal;

          display: flex;
          // align-items: center;
          align-items: flex-end;
          justify-content: center;
          padding-bottom: 8rpx;
          box-sizing: border-box;


          width: 180rpx;
          height: 48rpx;
          background: linear-gradient(270deg, #FF2F00 0%, #FF8E84 100%);
          border-radius: 25rpx;

          .price-box {
            display: flex;
            align-items: flex-end;
            margin-left: 4rpx;
            padding-bottom: 4rpx;


            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #FFFFFF;
            line-height: 26rpx;
            text-align: left;
            font-style: normal;

            .unit {
              font-size: 24rpx;
              line-height: 22rpx;
            }

            .price {

              font-size: 32rpx;
            }
          }
        }

        .base-price-box {
          position: absolute;
          left: 100rpx;
          top: 8rpx;
          z-index: 1;

          height: 40rpx;
          background: #EFECEC;
          border-radius: 25rpx;

          box-sizing: border-box;
          padding-right: 14rpx;
          padding-left: 90rpx;

          display: flex;
          // align-items: center;
          align-items: flex-end;

          justify-content: flex-end;


          .text-dc {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
            line-height: 33rpx;
            text-align: left;
            font-style: normal;
            word-break: keep-all;

            padding-bottom: 4rpx;
          }

          .price-dc {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #666666;
            line-height: 24rpx;
            text-align: left;
            font-style: normal;
            padding-bottom: 10rpx;
            margin-left: 4rpx;
          }

          text-align: right;
        }


      }

      .text {
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        // font-weight: 500;
        color: #F14C4C;
        // line-height: 28rpx;
        margin-left: 10rpx;

        margin-right: 8rpx;
        line-height: 35rpx;

        padding-top: 6rpx;
      }

      .main-price {
        font-size: 42rpx;
        font-weight: 500;
        line-height: 33rpx;
      }

      .money-icon {
        font-size: 22rpx;

      }

    }

  }
</style>